<!--
 * @Author: [kangjie]
 * @Date: 2022-09-02 14:37:49
 * @LastEditors: 18222335065 2369811390@qq.com
 * @LastEditTime: 2022-09-06 09:28:52
 * @Description: 
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 背景条 -->
      <div class="header_top">
        <!-- 居中模板 -->
        <div class="wrapper">
          <div style="color: black;" class="left">南开大学欢迎您！</div>
          <div style="color: black;" class="right">学校主页</div>
        </div>
      </div>
      <!-- <div style="height:10px; background-color: #63b8d5;"></div> -->
      <!-- logo -->
      <div class="header_bottom">
        <div class="wrapper">
          <!-- logo -->
          <div class="logo">
            <!-- @表示src -->
            <img @click="$router.push('/home')" height="70px" src="@/assets/yxtx/logo.png" alt="" />
          </div>
          <!-- 栏目分类 -->
          <div class="article">
            <ul>
              <!-- 绑定事件 v-on:事件类型 简写为@事件类型 -->
              <!-- [{category:{name}},{},{}] -->
              <li @click='toArticle(item.category)' :class='$route.query.name===item.category.name?"current":""' v-for="item in categories" :key="item.id">
                {{ item.category.name }}
              </li>
            </ul>
          </div>
        </div>
        <!-- <div style="height:5px; background-color: #63b8d5;"></div> -->
      </div>
    </div>
    <!-- /头部 -->
  </div>
</template>
<script>
import {get} from '@/utils/request';
export default {
  data() {
    return {
      // 栏目分类
      categories: [],
    };
  },
  methods: {
    // 获取栏目分类
    async getCategories() {
      // axios 请求 get post del
      let res = await get("/index/article/findCategoryArticles");
      console.log(res, "获取响应");
      this.categories = res.data;
      //  [{category:{name:""},artilces:[]},{},{},{},{}]
    },
    // 跳转到栏目信息页面
    toArticle(item){
      // 编程式导航跳转
      this.$router.push({
        path:"/article",
        query:item
      })
    },
  },
  created() {
		this.getCategories();
	},
};
</script>
<style lang="scss">
// 写头部样式
.header {
  background-color: #53b7d7;
  user-select: none;
  .header_top {
    background-color: #53b7d7;
    
    // background-color:white;
    .wrapper {
      display: flex;
      // 设置主轴排列方式
      justify-content: space-between;
      color: white;
      line-height: 40px;
      height: 40px;
    }
  }
  .header_bottom {
    height: 85px;
    background-color: #53b7d7;
    // margin-top: 1px;
    border: 1px dotted #ececec;
    color: white;
    .wrapper {
      display: flex;
      justify-content: space-between;
      .article {
        padding-top: 23px;
        ul {
          display: flex;
          justify-content: space-evenly;
          .current{
            background-color: #45afd3;
            color: white;
          }
          li {
            margin-left: 10px;
            padding: 0.8em;
            font-size: 16px;
          }
          li:hover {
            position:relative;
            background-color: #45afd3;
            color: rgb(188, 244, 235);
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>